﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>逻辑连接绑定</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/llinkbindors.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/data.js"></script>
	<script type="text/javascript" src="./js/canvas.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		#myCanvas{
			cursor: pointer !important;
			position:absolute !important;
			right:0px !important;
			bottom:0px !important;
		}

	</style>
	<script>
          
       var id = '[[${id}]]';
     	//alert(id);
     	//app数据
     	var logicTopologyData;
     	var preApps=[];
     	$(function(){
            var url='[[@{/logic_topology/get_by_id}]]';
            $.ajax({
    			url:url,
    			data:{"id":id},
    			dataType:"JSON",
    			type:"POST"
    		}).done(function(alldata){
    			logicTopologyData = alldata;
    			if(alldata.data&&alldata.success){
    				preApps=alldata.data.preinstalledApps;
    				//重新加载右侧的app 
    				for(var rp=0;rp<preApps.length;rp++){
    					var preApp={x:window.innerWidth-395,y:80*(rp+1),width:50,height:50,id:preApps[rp].id,img:preApps[rp].icon,app:preApps[rp]};
      					 if(preApps[rp].id){
      						preApp.tId = preApps[rp].id;
  	    	            }
  	    	            circles.push(preApp);
    				}
    				$.ajax({
    		     		url : '[[@{/view_position/query}]]',
    		     		data: {"params.topologyId_eq":id},
    		     		dataType:"JSON",
    		     		type:"POST"
    		     	}).done(function(indexdata){
    		     		if(indexdata&&indexdata.success){
    		     			var apps = indexdata.data;
    		     			for(var i=0;i<apps.length;i++){
    		     				var cir = {};
    		     				cir.height = apps[i].height;
    		     				cir.width = apps[i].width;
    		     				cir.img = apps[i].icon;
    		     				cir.tId = apps[i].deviceId;
    		     				cir.x = apps[i].x;
    		     				cir.y = apps[i].y;
    		     				cir.id = i;
    		     				cir.title =apps[i].deviceTypeName;
    		     				cir.positionId=apps[i].id;
    		     				var poApps  = logicTopologyData.data.apps;
    		     				for(var j=0;j<poApps.length;j++){
    		     					if(poApps[j].id==cir.tId){
    		     						cir.app = poApps[j];
    		     						break;
    		     					}
    		     				}
    		     				circles2.push(cir);
    		     			}
    		     			$.ajax({
    		        			url:'[[@{/logic_topology/get_virtual_links_by_logic_topology_id}]]',
    		        			data:{"id":id},
    		        			dataType:"JSON",
    		        			type:"POST"
    		        		}).done(function(linkdata){
    		        			if(linkdata.data&&linkdata.success){
    		        				for(var i=0;i<linkdata.data.length;i++){
    		            				var obj1=linkdata.data[i].leftApp;
    		    						var obj2=linkdata.data[i].rightApp;
    		    						var cobj1;
    		    						var cobj2;
    		    						for(var l=0;l<circles2.length;l++){
    		    							if(circles2[l].tId==obj1){
    		    								cobj1 = circles2[l];
    		    								continue;
    		    							}
    		    							if(circles2[l].tId==obj2){
    		    								cobj2 = circles2[l];
    		    								continue;
    		    							}
    		    						}
    		    						var param = {leftAppId:obj1,rightAppId:obj2};
   		    				        	$.ajax({
   		    					        	url:'[[@{/logic_link/find_all_by_two_app_id}]]',
   		    					        	data:param,
   		    					        	type:"POST",
   		    					        	dataType:"JSON",
   		    					        	async: false
   		    					        }).done(function(data111){
   		    					        	doLine(cobj1,cobj2,data111.data.length,{param:data111.data});
   	    		    						drawCircles();
   		    					        });
    		        				}
    		        			}
    		        		})
    		     			drawCircles();
    		     		}
    		     	});
    			}
    		})
     	});
     	
        /*添加APP*/
        function addOne(x , y , width , height , id , img ,app,text){
            var newObj = {x:x , y:y , width:width , height:height , id:id , img:img,app:app};
            if(app.id){
            	newObj.tId = app.id;
            }
            circles.push(newObj);
            drawCircles();
        }
       
        function lineEvent1(obj1 , obj2){
          //  alert(obj1.id+'连上了!'+obj2.id);
        }
        function lineEvent2(obj1 , obj2){
           // alert(obj1.id+'断开!'+obj2.id);
        }
       //删除  app 
        function rightKey(robj){
        	var delApp=robj;
        	$(".rk1").on("click",function(){
           		$(".rightKey").hide();
           		var predelapp={};
 		    	predelapp.icon=delApp.app.icon;
 		    	predelapp.name=delApp.app.name;
 		    	predelapp.version=delApp.app.version;
 		    	predelapp.remark=delApp.app.remark;
 		    	predelapp.id=delApp.app.id;
 		    	//app.logicTopology={'id':id};
 		    	predelapp.preinstalledRedLogicTopology={'id':id};
 		    	
 		    	predelapp = JSON.stringify(predelapp);
 		    	$.ajax({
 		    		url:'[[@{/app/save}]]',
 		    		data:predelapp,
 		    		dataType:"JSON",
 		    		type:"POST",
 		    		contentType:"application/json"
 		    	}).done(function(data){
 		    		if(data){
 		    			 alert("删除app成功 ");
 		    		//删除位置 
 		    			$.ajax({
    	 		    		url:'[[@{/view_position/delete}]]',
    	 		    		data:{id:delApp.positionId},
    	 		    		dataType:"JSON",
    	 		    		type:"POST",
    	 		    		ContentType: "application/x-www-form-urlencoded"
    	 		    	}).done(function(data2){
    	 		    		if(data2){
    	 		    			//alert("删除位置  ");
    	 		    			oldCircles2=[];
    	 		    			oldCircles=[];
    	 		    			//删除重画app 
     	    	         		var curleftApps=circles2;
     	    	               	circles2=[];
     	    	               for(var la=0;la<curleftApps.length;la++){
     	    	            	   if(curleftApps[la].app.id!=delApp.app.id){
     	    	            		   circles2.push(curleftApps[la]);
     	    	            	   }
     	    	               }
        	               
        	               
        	    				//删除app同时删除与之相连的线 
        	    				var newLineObjs=[];
        	    				newLineObjs=lineObjs;
        	    				lineObjs=[];
        	    				for(var k=0;k<newLineObjs.length;k++){
        	 					var leftAppId = newLineObjs[k].obj1.id;
        	 					var rightAppId = newLineObjs[k].obj2.id;
    	    	 					if(leftAppId!=delApp.tId&&rightAppId!=delApp.tId){
    	    	 						lineObjs.push(newLineObjs[k]);
    	    	 					}
        	    				}
        	      			//删除成功将原来的app放回
        	               	var curnewApp={x:window.innerWidth-395,y:80*(circles.length+1),width:50,height:50,img:delApp.app.icon,app:delApp.app};
        	 				circles.push(curnewApp);		        			
        	         		drawCircles();
    	 		    		}
    	 		    	});
 		    		}
 		    	});
        	});
       }
        /*图标双击*/
        /*APP乙端口配置*/
        function iconEvent4(obj1) {
        	 var titleHtml=	'<tr><td><div>'+obj1.app.name+'端口</div></td><td><div>关联APP/端口</div></td><td><div>连接名称</div></td><td><div>连接类型</div></td></tr>';
  		  	 $("#appPortheader").html(titleHtml);
        	var tId = obj1.tId;
            var url = "[[@{/logic_link/find_by_app_id}]]";
            $.ajax({
            	url:url,
            	data:{appId:tId},
            	type:"POST",
            	dataType:"JSON"
            }).done(function(data){
	             if(data){
	                 addDataPop(data.data)
	             }
             });
            $("#showInfo").hide();
            $("#showInfo2").show();
            tableSum2();
        }
        function addDataPop(data){
            //alert(JSON.stringify(data));
            $(".contentTableDiv2 .popTbody2").empty();
            var html = '';
           if(data&&data.length>0){
        	   $.each(data,function(k,v){
                   html += '<tr>';
                   html += '<td>'+v.leftPort+'</td>';
                   html += '<td>'+v.rightPort+'</td>';
                   html += '<td>'+v.name+'</td>';
                   var typeName="单播";
                   if(v.logicalLinkType==2){
                	   typeName="多播";
                   }
                   html += '<td>'+typeName+'</td>';
                   html += '</tr>';
               });
           }
            $(".contentTableDiv2 .popTbody2").append(html);
        }
        /*应用连接配置栏*/
        /*线双击*/
        var curLinkObj;//当前选中的线
        var paramSearch={};
        function lineEvent3(obj1,obj2,linkObj){
        	if(!linkObj.param){
        		linkObj.param = [];
        	}
        	var left;
        	var right;
        	for(var i=0;i < circles2.length;i++){
        		if(circles2[i].tId==linkObj.obj1.id){
        			left = circles2[i];
        		}
        		if(circles2[i].tId==linkObj.obj2.id){
        			right = circles2[i];
        		}
        	}
        	var leftApp=left.app.name;
       		 var rightApp=right.app.name;
       		 var titleHtml=	'<tr><td><div>'+leftApp+'端口</div></td><td><div>'+rightApp+'端口</div></td><td><div>连接名称</div></td><td><div>连接类型</div></td><td><div>操作</div></td></tr>';
  		  	 $("#appHeader").html(titleHtml);

       		 var param = {leftAppId:left.tId,rightAppId:right.tId};
        	$.ajax({
	        	url:'[[@{/logic_link/find_all_by_two_app_id}]]',
	        	data:param,
	        	type:"POST",
	        	dataType:"JSON"
	        }).done(function(data){
	        	 curLinkObj = linkObj;
	        	 if(linkObj.param&&linkObj.param.length>data.data.length){
	        		 addDataPop2(linkObj.param);
	        	 }else{
	        		 linkObj.param = data.data;
	        		 addDataPop2(data.data);
	        	 }
	             tableSum();
	           
	        });
        	 $("#showInfo2").hide();
            $("#showInfo").show();
        }
        function addDataPop2(data){
            $(".contentTableDiv .popTbody").empty();
            var html = '';
            if(data&&data.length>0){
            	$.each(data,function(k,v){
                    if(v.id){
                    	html += '<tr tId="'+v.id+'">';
                    }else if(v.ran){
                    	html += '<tr id="'+v.ran+'">';
                    }else{
                    	html += '<tr>';
                    }
                    html += '<td>'+v.leftPort+'</td>';
                    html += '<td>'+v.rightPort+'</td>';
                    html += '<td>'+v.name+'</td>';
                    var typeName = "单播";
                    if(v.type==2){
                    	typeName = "多播";
                    }
                    html += '<td>'+typeName+'</td>';
                    html += '<td><div class="update app_text" style="cursor:pointer;" onclick="newUpdate(this)">编辑</div><div class="delete" style="cursor:pointer;" onclick="newDelete(this);">删除</div></td>\n';
                    html += '</tr>';
                });
            }
            $(".contentTableDiv .popTbody").append(html);
        }
        function tableSum2() {
            $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv2").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv2 table").css("width", "100%");
            }
            $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
        }
        function tableSum() {
            $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv table").css("width", "100%");
            }
            $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
        }
        $(function(){
            tableSum();
            tableSum2
        });
        $(window).resize(function() {
            tableSum();
            tableSum2
        });
        function getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'//让他有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }

	</script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		.selectOp{display:none;}
	</style>
</head>
<body>
<div id="rightKey">
	<div onclick="copy()">复制</div>
	<div onclick="past()">黏贴</div>
	<div class="rk1">删除</div>
</div>
<div class="editPOP" style="top: 100px;right: 100px;"></div>

<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';" style="background-color:#04A0E9;color:#FFFFFF">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<!-- 头部 -->
		<div class="top-bar">
			<div style="float:left;font-size:18px;padding-left:20px;padding-top:20px;">编辑逻辑预案</div>

			<!-- <div class="b1" >
				<div>全单播</div>
				<div style="margin-left:10px;"><img src="./images/llinkbindors/dan.png"></div>
			</div>
			<div class="b3" >
				<div>单播+全播</div>
				<div style="margin-left:10px;"><img src="./images/llinkbindors/danquan.png"></div>
			</div>

			<button class="b5" type="button">只看多播</button> -->
			<button class="b5" type="button" style="right:110px;" onclick="back();">返回</button>
			<button  class="b6" type="button" onclick="saveAllApp();">保存</button>
		</div>


		<!-- 右侧 -->
		<div class="right">
			<div class="r0 app_text" id="showApp">APP</div>
			<div class="r0 app_text" style="display:none;" id="showConn">APP连线</div>
			<div class="r1 ">
				<div  class="shadow"><img class="addApp" onclick="addApp();" style="cursor:pointer;" src="./images/llinkbindors/addApp.png"></div>
				<div class="r-text ">添加应用</div>
			</div>
			<div class="r2 selectOp" >
				<div  class="shadow"><img  id="addLine" clicktype = "1" style="cursor:pointer;" onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2,$(this))" src="./images/topology/line.png"></div>
				<div class="r-text ">添加连线</div>
			</div>
			<div class="addLines" onclick="selectOP();" id="newConn">逻辑连接</div>
			<div class="addLines" onclick="selectOP();" style="display:none;" id="newApp">添加应用</div>
		</div>
		<!-- 左上 -->
		<div class="table-box" >
		</div>
		<!-- 底部 -->
		<div class="bottom" style="display:none;" id="bottom1">
			<div class="bt1"><img id="icon" src="./images/llinkbindors/system_update.png" style="width:50px;height:50px;"></div>
			<div class="bt2">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="appName" placeholder="输入名称"/></div>
			</div>
			<div class="bt3">
				<div>版本号&nbsp;:</div>
				<div><input type="text" id="appVersion" placeholder="输入版本号"></div>
			</div>
			<div class="bt4">
				<div>图标&nbsp;:</div>
				<div style="margin-left:20px;">
					<select id="appIcon111" onchange="changeIcon(this);">
						<option value="1">默认图标</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
					</select>
				</div>
			</div>
			<div class="bt5">
				<div>备注&nbsp;:</div>
				<div style="position: absolute;left: 30px;right: 0px;height: 28px;"><input type="text" id="appRemark" placeholder="输入备注信息" style="width:90%;"></div>
			</div>
			<button  class="b6" type="button" onclick="dissave();" style="margin-right:100px;">取消</button>
			<button  class="b6" type="button" onclick="saveApp();">保存</button>
		</div>
		<!-- 编辑 -->
		<div class="bottom" style="display:none;" id="bottom2">
			<div class="bt1"><img id="icon2" src="./images/llinkbindors/system_update.png" style="width:50px;height:50px;"></div>
			<div class="bt2">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="appName2" placeholder="输入名称"/></div>
			</div>
			<div class="bt3">
				<div>版本号&nbsp;:</div>
				<div><input type="text" id="appVersion2" placeholder="输入版本号"></div>
			</div>
			<div class="bt4">
				<div>图标&nbsp;:</div>
				<div style="margin-left:20px;">
					<select id="appIcon11122" onchange="changeIcon2(this);">
						<option value="1">默认图标</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
					</select>
				</div>
			</div>
			<div class="bt5">
				<div>备注&nbsp;:</div>
				<div style="position: absolute;left: 30px;right: 0px;height: 28px;"><input type="text" id="appRemark2" placeholder="输入备注信息" style="width:90%;"></div>
			</div>
			<button  class="b6" type="button" onclick="dissave();" style="margin-right:100px;">取消</button>
			<button  class="b6" type="button" onclick="editApp();">保存</button>
		</div>
	</form>
</div>
<!--APP乙端口配置-->
	<div class="pop_block2" id="showInfo2" style="display:none;">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">APP端口配置</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody id="appPortheader"></tbody>
				<tr>
					<td><div>APP乙端口</div></td>
					<td><div>关联APP/端口</div></td>
					<td><div>连接名称</div></td>
					<td><div>连接类型</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody class="popTbody2"></tbody>
			</table>
		</div>
	</div>
<!--应用连接配置栏-->
	<div class="pop_block" id="showInfo" style="display:none;" >
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">应用连接配置栏</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>

		<div class="headerTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tbody id="appHeader"></tbody>
			</table>
		</div>
		<div class="contentTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tbody class="popTbody"></tbody>
			</table>
		</div>
		<div class="pop_inputNew">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >

				<tr>
					<td width="20%"><input id="leftPort" type="text" ></td>
					<td width="20%"><input id="rightPort" type="text" ></td>
					<td width="20%"><input id="name" type="text" ></td>
					<td width="20%">
						<select id="logicalLinkType" style="width:150px;background-color:#F8F8F8;border:none;">
							<option value="1">单播</option>
							<option value="2">多播</option>
						</select>
					</td>
					<td width="20%">
						<div class="app_text" onclick="addConn(this);" style="float:left;margin-left:18px;cursor:pointer;">添加链接</div><div class="app_text" onclick="save3();" style="float:right;margin-right:20px;cursor:pointer;">保存</div>
					</td>
				</tr>

			</table>

		</div>
		
	</div>
</body>
<script type="text/javascript">
$(document).bind('contextmenu',function(){
    return false;
});


$("body").click("mousedown",function(e){
    $("#rightKey").hide();
    $(".lineMenu").hide();
});

	var canvasData = {x:320 , y:130, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-132)-100};
	init_canvas(canvasData ,3, lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4,rightKey,appClick,addNewApp);//初始化
	drawCircles();
	var changApp=[];
	function selectOP(){
		cancelDrawLine();
		if($(".r2").hasClass("selectOp")){
			$(".r2").removeClass("selectOp");
			$(".r1").addClass("selectOp");
			$("#showApp").hide();
			$("#showConn").show();
			$("#newApp").show();
			$("#newConn").hide();
			changApp=circles;
			circles=[];
			drawCircles();
		}else{
			$(".r1").removeClass("selectOp");
			$(".r2").addClass("selectOp");
			$("#showConn").hide();
			$("#showApp").show();
			$("#newApp").hide();
			$("#newConn").show();
			circles=changApp;
			changApp=[];
			drawCircles();
		}
	}
    $(document).bind('contextmenu',function(){
        return false;
    });

    $("body").click("mousedown",function(e){
        $("#rightKey").hide();
    });
    //
    //添加链接
    function addConn(obj){
		var tr = $(obj).parent().parent();
		var leftPort = $("#leftPort").val();
		leftPort=parseInt(leftPort);
		var ran = new Date().getTime();
		if(leftPort==""||leftPort<0||leftPort>65535){
			alert("请输入正确的端口号(范围0~65535)");
			return false;
		}
		var rightPort = $("#rightPort").val();
		rightPort=parseInt(rightPort);
		if(rightPort==""|| rightPort>65535||rightPort<0){
			alert("请输入正确的端口号(范围0~65535)");
			return false;
		}
		var name=$("#name").val();
		var logicalLinkType = $("#logicalLinkType").val();
		var logicalLinkTypeName = "单播";
		if(logicalLinkType==2){
			logicalLinkTypeName = "多播";
		}
		var newTr = "<tr id='"+ran+"'><td>"+leftPort+"</td><td>"+rightPort+"</td><td>"+name+"</td><td>"+logicalLinkTypeName+"</td>";
		newTr+= '<td><div class="update app_text" style="cursor:pointer;" onclick="newUpdate(this)">编辑</div><div class="delete" style="cursor:pointer;" onclick="newDelete(this);">删除</div></td>'
		newTr+= '</tr>';
		var line = {name:name,
				type:logicalLinkType,
				leftApp:{x:curLinkObj.obj1.x,y:curLinkObj.obj1.y,tId:curLinkObj.obj1.id},
				rightApp:{x:curLinkObj.obj2.x,y:curLinkObj.obj2.y,tId:curLinkObj.obj2.id},
				leftPort:leftPort,
				rightPort:rightPort,
				ran:ran
		};
				
		if(curLinkObj.param){
			curLinkObj.param.push(line);
		}
		$(".popTbody").append(newTr);
		curLinkObj.count = curLinkObj.param.length;
		/* saveAllApp(); */
		drawCircles();
		//$("#showInfo").hide();
		alert("添加成功");
		$("#leftPort").val("");
		$("#rightPort").val("");
		$("#name").val("");
		$("#logicalLinkType").val("");
	}
    //编辑弹窗 
    var curRan;//用于修改
    var curId;
	function newUpdate(obj){
		curRan=null;
		curId = null;
		var ran = $(obj).parent().parent().attr("id");
		var id  = $(obj).parent().parent().attr("tId");
		var td = $(obj).parent().parent().find("td");
		if(ran){
			curRan = ran;
		}else if(id){
			curId = id;
		}
		$("#leftPort").val($(td[0]).html());
		$("#rightPort").val($(td[1]).html());
		$("#name").val($(td[2]).html());
		var typeName = $(td[3]).html();
		if(typeName=="多播"){
			$("#logicalLinkType").val(2);
		}else{
			$("#logicalLinkType").val(1);
		}
	}
	//删除弹窗连线 
	function newDelete(obj){
		var id = $(obj).parent().parent().attr("tId");
		var ran = $(obj).parent().parent().attr("id");
		var param = curLinkObj.param;
		if(id){
			var delIndex ;
			for(var i = 0 ; i < param.length; i++){
				if(param[i].id&&param[i].id==id){
					delIndex = i;
					break;
				}
			}
			if(!isNaN(delIndex)){
				param = param.splice(delIndex, 1);
        		$(obj).parent().parent().remove();
        		drawCircles();
			}
		}else if(ran){
			var delIndex ;
			for(var i = 0 ; i < param.length; i++){
				if(param[i].ran&&param[i].ran==ran){
					delIndex = i;
					break;
				}
			}
			if(!isNaN(delIndex)){
				param = param.splice(delIndex, 1);
				$(obj).parent().parent().remove();
			}
		}
		curLinkObj.count = curLinkObj.param.length;
		alert("删除成功 ");
	}
    
    //弹窗保存链路
    function save3(){
    	if(!curRan&&!curId){
    		alert("请选择要修改的链路");
    		return false;
    	}
    	var leftPort = $("#leftPort").val();
		if(leftPort==""){
			return false;
		}
		var rightPort = $("#rightPort").val();
		if(rightPort==""){
			return false;
		}
		var name=$("#name").val();
		var logicalLinkType = $("#logicalLinkType").val();
		var logicalLinkTypeName = "单播";
		if(logicalLinkType==2){
			logicalLinkTypeName = "多播";
		}
		var param = curLinkObj.param;
		var tds;
		if(curRan){
			tds = $("#"+curRan).find("td");
			for(var i=0;i<param.length;i++){
				if(param[i].ran&&param[i].ran==curRan){
					param[i].leftPort = leftPort;
					param[i].rightPort = rightPort;
					param[i].name = name;
					param[i].type = logicalLinkType;
					break;
				}
			}
		}else if(curId){
			tds =  $(".popTbody").find("tr[tId="+curId+"]").find("td");
			for(var i=0;i<param.length;i++){
				if(param[i].id&&param[i].id==curId){
					param[i].leftPort = leftPort;
					param[i].rightPort = rightPort;
					param[i].name = name;
					param[i].type = logicalLinkType;
					break;
				}
			}
		}
		$(tds[0]).html(leftPort);
		$(tds[1]).html(rightPort);
		$(tds[2]).html(name);
		$(tds[3]).html(logicalLinkTypeName);
		curRan=null;
		curId = null;
		//$("#showInfo").hide();
		alert("保存成功 ");
		$("#leftPort").val('');
		$("#rightPort").val('');
		$("#name").val('');
		$("#logicalLinkType").val('');
	}
   
    /*选择图标*/
	function changeIcon(obj){
		var selectVal=$(obj).val();
        if(selectVal=="默认图标"){
            $("#icon").attr("src","./images/llinkbindors/system_update.png");
        }
        if(selectVal==2){
            $("#icon").attr("src","./images/llinkbindors/sync.png");
        }
        if(selectVal==3){
            $("#icon").attr("src","./images/llinkbindors/browser.png");
        }
        if(selectVal==4){
            $("#icon").attr("src","./images/llinkbindors/backup.png");
        }
        if(selectVal==5){
            $("#icon").attr("src","./images/llinkbindors/calculator.png");
        }
        if(selectVal==6){
            $("#icon").attr("src","./images/llinkbindors/profile_switcher.png");
        }
        if(selectVal==7){
            $("#icon").attr("src","./images/llinkbindors/recorder.png");
        }
        if(selectVal==8){
            $("#icon").attr("src","./images/llinkbindors/weather.png");
        }
	}
	function changeIcon2(obj){
		var selectVal=$(obj).val();
        if(selectVal=="默认图标"){
            $("#icon2").attr("src","./images/llinkbindors/system_update.png");
        }
        if(selectVal==2){
            $("#icon2").attr("src","./images/llinkbindors/sync.png");
        }
        if(selectVal==3){
            $("#icon2").attr("src","./images/llinkbindors/browser.png");
        }
        if(selectVal==4){
            $("#icon2").attr("src","./images/llinkbindors/backup.png");
        }
        if(selectVal==5){
            $("#icon2").attr("src","./images/llinkbindors/calculator.png");
        }
        if(selectVal==6){
            $("#icon2").attr("src","./images/llinkbindors/profile_switcher.png");
        }
        if(selectVal==7){
            $("#icon2").attr("src","./images/llinkbindors/recorder.png");
        }
        if(selectVal==8){
            $("#icon2").attr("src","./images/llinkbindors/weather.png");
        }
	}
    /*编辑app*/
    
    /*添加APP到预置列 表 */
   /*  var apps=[];
    var app={}; */
    var count=0;
    function　addApp(){
    	$("#bottom1").show();
    	$(".editPOP").show();
    	$("#bottom2").hide();
    }
    
    function saveApp(){
    	var imgSrc=$("#icon").attr("src");
    	var app={};
    	app.icon=imgSrc;
    	app.name=$("#appName").val();
    	app.version=$("#appVersion").val();
    	app.remark=$("#appRemark").val();
    	//app.logicTopology={'id':id};
    	app.preinstalledRedLogicTopology={'id':id};
    	if(app.name==''){
    		alert("app名称不能为空 ");
        	$("#bottom1").hide();
    		$(".editPOP").hide();
    		return false;
    	}
    	app = JSON.stringify(app);
    	$.ajax({
    		url:'[[@{/app/save}]]',
    		data:app,
    		dataType:"JSON",
    		type:"POST",
    		contentType:"application/json"
    	}).done(function(data){
    		if(data&&data.success){
    			count=circles.length;
    			++count;
    		        if(count&&count>6){
    		            alert("您已经添加了6个,连接完再添加吧")
    		            count=0;
    		            return false;
    		        }else if(!count){
    		        	count=0;
    		        }
    		        var app=data.data;
    		        addOne(window.innerWidth-395, 80*count, 50, 50, count, $("#icon").attr("src"),app);
    		        
    		        alert("添加成功 ");
    		        $("#bottom1").hide();
    				$(".editPOP").hide(); 
    	        	$("#icon").attr("src","./images/llinkbindors/1.png");
    			}
    	}).fail(function(res){
       		alert("请保存app信息");
       		$("#bottom1").hide();
    		$(".editPOP").hide();
        	$("#icon").attr("src","./images/llinkbindors/1.png");
    	});
    	$("#appName").val('');
    	$("#appVersion").val('');
    	$("#appRemark").val('');
    }
   	function addNewApp(appobj){
   		
   	}
    //编辑app
    var curApp={};
     function appClick(obj){
    	 curApp=obj;
    }
    function editApp(){
    	var app={};
    	var imgSrc=$("#icon2").attr("src");
    	app.icon=imgSrc;
    	app.name=$("#appName2").val();
    	app.version=$("#appVersion2").val();
    	app.remark=$("#appRemark2").val();
    	app.logicTopology={'id':id};
    	//app.preinstalledRedLogicTopology={'id':id};
    	app.id=curApp.app.id;
    	
    	app = JSON.stringify(app);
    	$.ajax({
    		url:'[[@{/app/save}]]',
    		data:app,
    		dataType:"JSON",
    		type:"POST",
    		contentType:"application/json"
    	}).done(function(data){
    		if(data&&data.success){
    			 var app=data.data;
 		        if(app.name){
 		        	app.title=app.name;
 		        }
 		        curApp.img=app.icon;
     			curApp.app=app;
     			
				drawCircles(); 
    			alert("修改成功 ");
    			$("#bottom2").hide();
    		}
    	}).fail(function(res){
       		alert("请保存app信息");
       		$("#bottom2").hide();
    	});
    }
    function dissave(){
    	$("#bottom1").hide();
    	$("#bottom2").hide();
    	$(".editPOP").hide();
    	$("#appName").val('');
		$("#appVersion").val('');
		$("#appRemark").val('');
		isDragging = false;
    }
    //保存所有app
	function saveAllApp(){
    	var flag=false;
    	//保存app 
    	var url1 = "[[@{/app/saves}]]";
		var paramApps = [];
		for(var k=0;k<circles2.length;k++){
			var curApp={};
			curApp.icon=circles2[k].img;
			curApp.name=circles2[k].app.name;
			curApp.id=circles2[k].tId;
			curApp.logicTopology={'id':id};
			//curApp.preinstalledRedLogicTopology={};
			paramApps.push(curApp);
		}
		paramApps = JSON.stringify(paramApps);
		var dfd = $.Deferred();
		var successCount = 0;
		$.ajax({
        	url:url1,
        	data:paramApps,
        	type:"POST",
        	dataType:"JSON",
   			contentType:"application/json",
   			success:function(){
   			//保存位置 信息 
   				for(var k=0;k<circles2.length;k++){
   					 var appIndex = {};
   						if(circles2[k].app.id!=null){
   							appIndex.deviceId = circles2[k].app.id;
   							appIndex.height = circles2[k].height;
   							appIndex.width = circles2[k].width;
   							appIndex.deviceTypeName = circles2[k].app.name;
   							appIndex.x = circles2[k].x;
   							appIndex.y = circles2[k].y;
   							appIndex.icon = circles2[k].img;
   							appIndex.topologyId = logicTopologyData.data.id;
   							appIndex.id = circles2[k].positionId;
   							appIndex.topologyTypeName = logicTopologyData.data.name;
   							appIndex = JSON.stringify(appIndex);
   							$.ajax({
   				   	        	url:'[[@{/view_position/save}]]',
   				   	        	data:appIndex,
   				   	        	type:"POST",
   				   	        	dataType:"JSON",
   				   	   			contentType:"application/json"
   				   	        }).done(function(indexData){
   				   	    		if(indexData){
   				   	    		successCount++;
   				   	    		if(successCount==circles2.length){
   				   	    		 dfd.resolve();
   				   	    		}
   				   	    			//alert("保存位置 ");
   				   	    		}
   				   	    	});
   						}
   				} 
   			}
        });
         
		
		$.when(dfd).done(function(){
			//链路信息 
			var preLinks=[];
			for(var i=0;i<lineObjs.length;i++){
				if(lineObjs[i].param){
					var links = lineObjs[i].param;
					var leftId;
					var rightId;
					for(var j=0;j<circles2.length;j++){
						if(lineObjs[i].obj1.id==circles2[j].app.id){
							leftId = circles2[j].app.id;
							continue;
						}
						if(lineObjs[i].obj2.id==circles2[j].app.id){
							rightId = circles2[j].app.id;
							continue;
						}
					}
					for(var j=0;j<links.length;j++){
						links[j].leftApp = {id:leftId};
						links[j].rightApp = {id:rightId};
						links[j].logicTopology = {id:id};
					}
				}
			}
			 //保存链路 
			var url1 = "[[@{/logic_link/saves}]]";
			var param1 = [];
			for(var i=0;i<lineObjs.length;i++){
				var links = lineObjs[i].param;
				if(links){
					for(var j=0;j<links.length;j++){
						links[j].logicalLinkType = links[j].type;
						param1.push(links[j]);
					}
				}
			}
			param1 = JSON.stringify(param1);
			//setTimeout(function(){
				$.ajax({
		        	url:url1,
		        	data:param1,
		        	type:"POST",
		        	dataType:"JSON",
		   			contentType:"application/json"
		        }).done(function(linkData){
		    		if(linkData){
		    			alert("保存成功 ");
		    		}
		    	});
			//},1000);
		});
		
	}
  
    function exit_pop(){
        $("#showInfo").hide();
    }
    function exit_pop2(){
        $("#showInfo2").hide();
    }
    function back(){
        window.location.href="logical_application_library";
     }
    function showBig(){
		window.location.href="physical_monitors2"
	}
</script>
<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
			    				var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		
			$(".pop_block2").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
			    				var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
</html>
